<template>
  <div class="body_bgi box_1 full bgs_full relative" ref="home_box">
    <!-- header -->
    <big-screen-header :headerName="activeName" />

    <!-- body -->
    <div class="w_full-60 h_full-130 m_0_auto flex_row_around">
      <!-- 1 -->
      <div class="w_30_p h_full flex_column_between" v-if="activeFarmId != '1780420395287969792'">
        <!-- 出栏统计 -->
        <div class="w_full h_40_p p_10 chart_box_bgi_1">
          <data-chart 
            title="种公羊出栏统计"
            path=''
            chartType="柱状图3"
            :chartData="chartData1" 
            filterText=""
            :filterList="[]"
            :isShowUnit="true"
            :isShowFilterIcon="false"
            :isShowFullIcon="true"
            @clickChart="clickChart1"
          />
        </div>

        <!-- 级别统计 -->
        <div class="w_full h_20_p chart_box_bgi_1 p_10">
          <data-chart 
            title="种公羊级别统计"
            path=''
            chartType="柱状图3"
            :chartData="chartData2" 
            filterText=""
            :filterList="[]"
            :isShowUnit="true"
            :isShowFilterIcon="false"
            :isShowFullIcon="true"
            @filterChartData="[]"
          />
        </div>

        <!-- 配种统计 (从种羊场出来的羊在 牧户家中 配种的数据) -->
        <div class="w_full h_39_p chart_box_bgi_1 p_10">
          <data-chart 
            title="配种统计"
            path=''
            chartType="环状图"
            :chartData="chartData3" 
            filterText=""
            :filterList="[]"
            :isShowUnit="true"
            :isShowFilterIcon="false"
            :isShowFullIcon="true"
            @clickChart="clickChart3"
          />
        </div>
      </div>

      <!-- 2 -->
      <div class="w_40_p h_full ph_10 border_box flex_column_between relative" v-if="activeFarmId != '1780420395287969792'">
        <div class="h_40 lh_40 flex_row_between main_bgc_jian_bian pr_20">
          <!-- <div class="main_color text_1 fw_bold ls_2 cursor" @click="goToZhongYangChang(activeFarmId)">简介</div> -->
          <div class="main_color text_1 fw_bold ls_2 cursor">交易羊分布坐标</div>
        </div>
        
        <div class="full" v-if="activeFarmId != '1780420395287969792'">
          <div class="w_full color_fff text_1 fw_bold ls_2 bgc_F0F3FA">..</div>
          <div class="w_full h_full-30">
            <bai-du-map-sheep />
          </div>
        </div>
      </div>

      <!-- 显示 细毛羊繁育保种场 的监控列表 -->
      <div class="w_80_p h_full ph_10 border_box flex_column_between relative" v-if="activeFarmId == '1780420395287969792'">
        <div class="h_40 lh_40 flex_row_between main_bgc_jian_bian pr_20">
          <div class="main_color text_1 fw_bold ls_2 cursor" @click="goToZhongYangChang(activeFarmId)">简介</div>
        </div>

        <!-- 监控列表 -->
        <div class="w_full h_full chart_box_bgi_1 relative">
          <play-video :muHuId="11111" :videoList="monitorList"/>
        </div>
      </div>

      <!-- 3 -->
      <div class="w_30_p h_full ph_10 border_box flex_column_between">
        <!-- <div class="w_full h_25_p chart_box_bgi_1 p_10">
          <div class="w_full h_30 main_color fw_bold fs_16 ls_2 flex_row_start flex_center">
            <div class="w_1 h_15 main_bgc main_border mr_10"></div>种羊厂- 种公羊统计
          </div>

          <div class="w_full h_full-30 flex_column_between">
            <div 
              class="w_full color_fff cursor fs_20 flex_row_start" 
              :class="{main_color: activeName == item.name}"
              v-for="(item, index) in farmList" :key="index"
              @click="clickFarm(item)"
            >
              <div class="w_70_p ellipsis">{{index+1 + '. ' + item.name }}</div>
              <div class="w_30_p text_right"><span class="font_number ls_2 fw_bold main_color">{{ item.totalCount }}</span>只</div>
            </div>
          </div>
        </div> -->

        <!-- 种公羊 列表 -->
        <div class="w_full h_full chart_box_bgi_1">
          <div class="full relative" v-if="isLoading">
            <dv-loading class="color_fff absolute_center">数据加载中...</dv-loading>
          </div>

          <div class="full" v-if="!isLoading && sheepList.length">
            <el-tabs v-model="activeTabName" type="card" @tab-click="handleClickTab">
              <el-tab-pane label="养殖信息" name="first">
                <div class="full scroll_box overflow_auto ph_10">
                  <div
                    class="w_full p_5 border_box flex_row_between cursor bgc_1a396b78 border_radius_10 p_5 mb_5"  
                    v-for="(item, index) in sheepList" :key="index"
                    @click="clickAnimal(item)"
                  >
                    <!-- 头像 -->
                    <!-- <div class="w_30_p aspect_ratio_7_8 border_radius_10 p_10" @click="clickAnimal(item)">
                      <img 
                        class="w_full border_radius_5 cursor response_img" 
                        v-if="item.fileList && item.fileList.length"
                        :src="filePath + item.fileList[0].fileUrl" alt=""
                      >
                      <img 
                        class="w_full border_radius_5 cursor object_fit_cover" 
                        v-else
                        :src="def_sheep_img" alt=""
                      >
                    </div> -->

                    <!-- 文字信息 -->
                    <div class="w_full flex_column_center pr_10 cursor">
                      <div class="text_1 main_color ellipsis">RFID: {{ item.rfid }}</div>
                      <div class="w_full flex_row_between">
                        <div class="text_1 color_fff">等级: {{ formatLevel(item.leaveType) }}</div>
                        <div class="text_1 color_fff">性别: {{ formatAnimalGender(item.sex) }}</div>
                      </div>
                      <div class="w_full flex_row_between">
                        <div class="text_1 color_fff">身高: {{ item.height }} cm</div>
                        <div class="text_1 color_fff">体重: {{ item.weight }} kg</div>
                      </div>
                      <div class="w_full flex_row_between">
                        <div class="text_1 color_fff">体长: {{ item.tiLength }} cm</div>
                        <!-- <div class="text_1 color_fff">谱系代数: {{ item.breedTotalCount }}</div> -->
                      </div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>

              <el-tab-pane label="交易信息" name="second">
                <div class="full scroll_box overflow_auto ph_10">
                  <div
                    class="w_full p_10 border_box flex_row_between mb_10 bgc_1a396b78 border_radius_10 p_5" 
                    v-for="(item, index) in sellList" :key="index"
                    @click="clickSellItem(item)"
                  >
                    <!-- 文字信息 -->
                    <div class="w_full flex_column_center pr_10 cursor">
                      <div class="w_full flex_column_center cursor relative color_fff ph_10">
                        <div class="w_full text_1 fs_10 flex_row_between">
                          <div class="main_color">种羊场: </div>
                          <div class="ellipsis">阿拉坦额莫勒镇额日和图种羊基地</div>
                        </div>
                        <div class="w_full text_1 fs_10 flex_row_between">
                          <div class="main_color">养殖户:</div>
                          <div class="ellipsis">{{ item.nickName }}</div>
                        </div>
                        <div class="w_full text_1 fs_10 flex_row_between">
                          <div class="main_color">苏木(镇):</div>
                          <div class="ellipsis">克尔伦苏木</div>
                        </div>
                        <div class="w_full text_1 fs_10 flex_row_between">
                          <div class="main_color">嘎查(村):</div>
                          <div class="ellipsis">芒来嘎查</div>
                        </div>
                        <!-- <div class="w_full text_1 fs_10 flex_row_between">
                          <div class="main_color">交易羊数量:</div>
                          <div class="ellipsis">{{ item.totalCount }} 只</div>
                        </div> -->
                      </div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          
          <div class="full relative" v-show="!isLoading && !sheepList.length">
            <div class="absolute_center color_fff">暂无养殖信息</div>
          </div>
        </div> 
      </div>
    </div>
  </div>
</template>

<script>
  import AmapWeather from '@/common/weather/AmapWeather.vue';
  import PlayVideo from '../common/play-video.vue';

  import defMixin from '@/mixins/def';
  import defImgMixin from '@/mixins/def-img';
  import componentsMixin from '@/mixins/components';

  import { getTownList } from '@/api/base/base.js'
  import {
    getFarmList, 
    getTownCattleCount,
    getMaleCattleCount,
    getCountyBreedCount,
    getFarmCattlePage,
    getSellPage,
    getVillageTotal
  } from '@/api/sheep/index.js';

  import { filePath } from "@/const"

  export default {
    name: 'ZhongYangChang',
    components: {
      AmapWeather,
      PlayVideo
    },
    mixins: [defMixin, defImgMixin, componentsMixin],
    data() {
      return {
        activeTabName: 'first',
        filePath: filePath,
        isLoading: false,

        farmId: null,
        activeFarmId: null,
        activeName: null,

        chartData1: {
          unit: '只',
          x: [],
          y: []
          // color: '#ed5195',
        },
        chartData2: {
          unit: '只',
          x: [],
          y: []
        },
        chartData3: {
          unit: '只',
          data: []
        },
        farmList: [],

        yearList: [
          { id: 1, name: '2019' },
          { id: 2, name: '2020' },
          { id: 3, name: '2021' },
          { id: 4, name: '2022' },
          { id: 5, name: '2023' }
        ],

        townList: [],                   // 巴林右旗 所属 镇、苏木 
        sheepList: [],
        sellList: [],
        pointList: [

        ],

        // 种羊场监控
        monitorList: [
          { 
            title: '大数据中心监控2', 
            img: 'https://oss.dayaar.com.cn/xmy/monitors/zhong_yang_chang/zhong-yang-chang/1.png?image_process=resize,w_400',
            url: 'https://rtmp03open.ys7.com:9188/v3/openlive/FG8360569_10_1.flv?expire=1758539803&id=759856066094706688&t=755322d1f082faf90771c410e9eee9648bff5e68b613171094448f26c4e9fa03&ev=100' 
          },
          { 
            title: '草料棚监控1', 
            img: 'https://oss.dayaar.com.cn/xmy/monitors/zhong_yang_chang/zhong-yang-chang/2.png?image_process=resize,w_400',
            url: 'https://rtmp03open.ys7.com:9188/v3/openlive/FG8360569_9_1.flv?expire=1758539694&id=759855608944918528&t=70541866c9a2cc1af24c47ad5e9b8379048c90501df836a52063d1532fd22dd2&ev=100' 
          },
          { 
            title: '羊圈监控5', 
            img: 'https://oss.dayaar.com.cn/xmy/monitors/zhong_yang_chang/zhong-yang-chang/3.png?image_process=resize,w_400',
            url: 'https://rtmp03open.ys7.com:9188/v3/openlive/FG8360569_8_1.flv?expire=1758539653&id=759855436600975360&t=c42f52f1f9b4d2c8d8273cb8d88eac461796217c242c92242e1e8c9396ec3c2f&ev=100' 
          },
          { 
            title: '大数据中心监控1', 
            img: 'https://oss.dayaar.com.cn/xmy/monitors/zhong_yang_chang/zhong-yang-chang/4.png?image_process=resize,w_400',
            url: 'https://rtmp03open.ys7.com:9188/v3/openlive/FG8360569_7_1.flv?expire=1758539409&id=759854412430548992&t=d7f52fe5288e386e32ef53f55cddcc17ae4b90869161956cde7430b42c993a5b&ev=100'
          },
          { 
            title: '羊圈监控4', 
            img: 'https://oss.dayaar.com.cn/xmy/monitors/zhong_yang_chang/zhong-yang-chang/5.png?image_process=resize,w_400',
            url: 'https://rtmp03open.ys7.com:9188/v3/openlive/FG8360569_6_1.flv?expire=1758539344&id=759854141617995776&t=266bfe9e81001d0ebf82112142570cad1b0008636c41dc6d089a38787e8dee7f&ev=100' 
          },
          { 
            title: '羊圈监控3', 
            img: 'https://oss.dayaar.com.cn/xmy/monitors/zhong_yang_chang/zhong-yang-chang/6.png?image_process=resize,w_400',
            url: 'https://rtmp03open.ys7.com:9188/v3/openlive/FG8360569_5_1.flv?expire=1758539279&id=759853869360353280&t=efab01b7a281924949f6aa9f53d8d1b2b6e0431ea6225d27848fc9f27c6a0f73&ev=100' 
          },
          { 
            title: '羊圈监控2', 
            img: 'https://oss.dayaar.com.cn/xmy/monitors/zhong_yang_chang/zhong-yang-chang/7.png?image_process=resize,w_400',
            url: 'https://rtmp03open.ys7.com:9188/v3/openlive/FG8360569_4_1.flv?expire=1758539116&id=759853182481334272&t=0d5e899fe5438afe66fe85ac00092977c5f449938d3b22d8b0f2e92e4e4535b8&ev=100' 
          },
          { 
            title: '羊棚监控1',
            img: 'https://oss.dayaar.com.cn/xmy/monitors/zhong_yang_chang/zhong-yang-chang/8.png?image_process=resize,w_400',
            url: 'https://rtmp03open.ys7.com:9188/v3/openlive/FG8360569_3_1.flv?expire=1758539033&id=759852835619606528&t=040ada481127c514d089a6fb74c59a55e7c0bf48d592abc5fb7d282abdb26df4&ev=100' 
          },
          { 
            title: '院子', 
            img: 'https://oss.dayaar.com.cn/xmy/monitors/zhong_yang_chang/zhong-yang-chang/9.png?image_process=resize,w_400',
            url: 'https://rtmp03open.ys7.com:9188/v3/openlive/FG8360569_2_1.flv?expire=1758528932&id=759810468406632448&t=bfa932cfa51dbec4204d690d440369c8db95015b0c0bcd5fedf34f823670df94&ev=100' 
          },
          { 
            title: '羊圈监控1', 
            img: 'https://oss.dayaar.com.cn/xmy/monitors/zhong_yang_chang/zhong-yang-chang/10.png?image_process=resize,w_400',
            url: 'https://rtmp03open.ys7.com:9188/v3/openlive/FG8360569_1_1.flv?expire=1758528844&id=759810100439515136&t=5719893081a1866730e8d5cbbab0e4068b32255a15092b182ab4f54d02bd3823&ev=100'
          },
          {
            title: '撒料机监控1',
            img: 'https://oss.dayaar.com.cn/xmy/monitors/zhong_yang_chang/zhong-yang-chang/11.png?image_process=resize,w_400',
            url: 'https://rtmp03open.ys7.com:9188/v3/openlive/FG8360569_11_1.flv?expire=1758689740&id=760484947188228096&t=d13631d489bd2d7d14e73b8d0346128e897288e31faacf813230e21c25fdc572&ev=100',
          },
          {
            title: '粪坑监控',
            img: 'https://oss.dayaar.com.cn/xmy/monitors/zhong_yang_chang/zhong-yang-chang/12.png?image_process=resize,w_400',
            url: 'https://rtmp03open.ys7.com:9188/v3/openlive/FG8360569_12_1.flv?expire=1758689956&id=760485852919889920&t=3d8047e6696da8b77760e75d68abcc0c4f2840ec9d43e0e54a2de1595e5e34ce&ev=100',
          },
          {
            title: '羊圈监控1',
            img: 'https://oss.dayaar.com.cn/xmy/monitors/zhong_yang_chang/zhong-yang-chang/13.png?image_process=resize,w_400',
            url: 'https://rtmp03open.ys7.com:9188/v3/openlive/FG8360569_13_1.flv?expire=1758690006&id=760486062819643392&t=e45ee818f2b8a20df0e17a8793a8efd9298abcd0349794ce68bc1992353f02c3&ev=100',
          },
          {
            title: '羊棚监控1',
            img: 'https://oss.dayaar.com.cn/xmy/monitors/zhong_yang_chang/zhong-yang-chang/14.png?image_process=resize,w_400',
            url: 'https://rtmp03open.ys7.com:9188/v3/openlive/FG8360569_14_1.flv?expire=1758690089&id=760486409319493632&t=e9f5ce52427f91cd8176d460d6a5cca4c1b63b6b073fa64e4a4d4ceb6d5208bd&ev=100',
          },
          {
            title: '羊棚监控2',
            img: 'https://oss.dayaar.com.cn/xmy/monitors/zhong_yang_chang/zhong-yang-chang/15.png?image_process=resize,w_400',
            url: 'https://rtmp03open.ys7.com:9188/v3/openlive/FG8360569_15_1.flv?expire=1758690126&id=760486567661117440&t=27127afba43dc36fd7a8d003bfe44554372c4089dc483bc39526ea0dfe303a4a&ev=100',
          },
          {
            title: '羊圈监控2',
            img: 'https://oss.dayaar.com.cn/xmy/monitors/zhong_yang_chang/zhong-yang-chang/16.png?image_process=resize,w_400',
            url: 'https://rtmp03open.ys7.com:9188/v3/openlive/FG8360569_16_1.flv?expire=1758690157&id=760486697742999552&t=e678f0a54a9fe6a9dbe6968bcfcd8f401939ff400ed0dc9b34686cdf5d1cd33e&ev=100',
          },
          {
            title: '羊棚监控3',
            img: 'https://oss.dayaar.com.cn/xmy/monitors/zhong_yang_chang/zhong-yang-chang/17.png?image_process=resize,w_400',
            url: 'https://rtmp03open.ys7.com:9188/v3/openlive/FG8360569_17_1.flv?expire=1758690211&id=760486923453083648&t=9d0aafc9e034a71225b3fe2c646c9080655dc055541ac4e7ac7f7cd14947dca4&ev=100',
          },
          {
            title: '羊棚监控4',
            img: 'https://oss.dayaar.com.cn/xmy/monitors/zhong_yang_chang/zhong-yang-chang/18.png?image_process=resize,w_400',
            url: 'https://rtmp03open.ys7.com:9188/v3/openlive/FG8360569_18_1.flv?expire=1758690247&id=760487073353314304&t=51a35fba0908bcb53b99e0585f96132b4ccacce04d38764d550b6a15665fa7f1&ev=100',
          },
          {
            title: '撒料机监控2',
            img: 'https://oss.dayaar.com.cn/xmy/monitors/zhong_yang_chang/zhong-yang-chang/19.png?image_process=resize,w_400',
            url: 'https://rtmp03open.ys7.com:9188/v3/openlive/FG8360569_20_1.flv?expire=1758690482&id=760488060826890240&t=1ab2e1e9ed41a94d6b043598c9bcd557e1ae7865437a7c24b8d23047831f00cc&ev=100',
          },
          {
            title: '羊圈监控3',
            img: 'https://oss.dayaar.com.cn/xmy/monitors/zhong_yang_chang/zhong-yang-chang/20.png?image_process=resize,w_400',
            url: 'https://rtmp03open.ys7.com:9188/v3/openlive/FG8360569_21_1.flv?expire=1758690599&id=760488550520066048&t=af61387adfd77b3284f351692a24d54d740e2d786fffdcc589b3bc4dcfa50a11&ev=100',
          },
          {
            title: '羊圈监控4',
            img: 'https://oss.dayaar.com.cn/xmy/monitors/zhong_yang_chang/zhong-yang-chang/21.png?image_process=resize,w_400',
            url: 'https://rtmp03open.ys7.com:9188/v3/openlive/FG8360569_22_1.flv?expire=1758690639&id=760488719462436864&t=b8be15583c7279d89996e2ea2f6cb211f8fdf1820c27f55c74bde3738c93f0be&ev=100',
          },
          {
            title: '羊圈监控5',
            img: 'https://oss.dayaar.com.cn/xmy/monitors/zhong_yang_chang/zhong-yang-chang/22.png?image_process=resize,w_400',
            url: 'https://rtmp03open.ys7.com:9188/v3/openlive/FG8360569_23_1.flv?expire=1758690686&id=760488915130916865&t=aa5e3ced38e0670b8567ef671705e18fd5484d3e58eb7b0e5cfd76844fc8fb26&ev=100',
          },
          {
            title: '羊棚监控5',
            img: 'https://oss.dayaar.com.cn/xmy/monitors/zhong_yang_chang/zhong-yang-chang/23.png?image_process=resize,w_400',
            url: 'https://rtmp03open.ys7.com:9188/v3/openlive/FG8360569_24_1.flv?expire=1758690734&id=760489117602553856&t=1e528705359e66df36a7dabf654e375af3a611979735088e2d99abddb9e2e5c7&ev=100',
          },
          {
            title: '羊圈监控6',
            img: 'https://oss.dayaar.com.cn/xmy/monitors/zhong_yang_chang/zhong-yang-chang/24.png?image_process=resize,w_400',
            url: 'https://rtmp03open.ys7.com:9188/v3/openlive/FG8360569_25_1.flv?expire=1758690772&id=760489275362914304&t=18c794b67029e498b3ea7b91aee9ee9c4b22f253b4ef3dbd8b2fc0eb88587b5c&ev=100',
          },
          {
            title: '草料棚监控1',
            img: 'https://oss.dayaar.com.cn/xmy/monitors/zhong_yang_chang/zhong-yang-chang/2.png?image_process=resize,w_400',
            url: 'https://rtmp03open.ys7.com:9188/v3/openlive/FG8360569_26_1.flv?expire=1758690880&id=760489730511998976&t=cc228953bc9d260bf786981e0e72503f6edc6d782b7af77996e6cbcf29d24035&ev=100',
          },
          {
            title: '羊圈监控7',
            img: 'https://oss.dayaar.com.cn/xmy/monitors/zhong_yang_chang/zhong-yang-chang/26.png?image_process=resize,w_400',
            url: 'https://rtmp03open.ys7.com:9188/v3/openlive/FG8360569_27_1.flv?expire=1758690923&id=760489910485594112&t=0923bff1271156b59f9ee79d248c4b442f6de7317ac62482cb154924a79f0623&ev=100',
          },
          {
            title: '羊棚监控6',
            img: 'https://oss.dayaar.com.cn/xmy/monitors/zhong_yang_chang/zhong-yang-chang/28.png?image_process=resize,w_400',
            url: 'https://rtmp03open.ys7.com:9188/v3/openlive/FG8360569_28_1.flv?expire=1758690972&id=760490112909811712&t=01468c2e43fcd76608e7e88bdcd8233ea2c96f958f87a0526a71fd372e84af62&ev=100',
          },
          {
            title: '羊棚监控7',
            img: 'https://oss.dayaar.com.cn/xmy/monitors/zhong_yang_chang/zhong-yang-chang/29.png?image_process=resize,w_400',
            url: 'https://rtmp03open.ys7.com:9188/v3/openlive/FG8360569_29_1.flv?expire=1758691038&id=760490390379798528&t=a2e3a2e74dbab7c39757d87538dc7c4d48cc345739906e57272b38adbbe7d87f&ev=100',
          },
          {
            title: '草料存储仓监控',
            img: 'https://oss.dayaar.com.cn/xmy/monitors/zhong_yang_chang/zhong-yang-chang/30.png?image_process=resize,w_400',
            url: 'https://rtmp03open.ys7.com:9188/v3/openlive/FG8360569_30_1.flv?expire=1758691083&id=760490580039118848&t=ed0a3fa63305bc2f949ce85572582474e8984768267e710dc8ca11398dc2f2e6&ev=100',
          }
        ],
        isShowMonitor: false
      }
    },
    computed: {

    },
    created() {
      
    },
    async mounted () {
      let farmId = this.$route.params.farmId
      let activeName = this.$route.params.name

      this.farmId = farmId
      this.activeFarmId = farmId
      this.activeName = activeName

      // 获取 从 xxx 种羊场 出栏的 种公羊分布情况
      // await this.getTownCattleCount(farmId)

      // 获取 种羊场 - 种公羊等级 （暂时没有统计）
      await this.getMaleCattleCount(farmId)

      // 获取 从 xxx 种羊场 出栏的 种公羊在全旗配种情况
      // await this.getCountyBreedCount(farmId)

      // 获取 种羊场列表
      // await this.getFarmList()

      // 获取 养殖档案列表
      let params1 = {
        current: 1,
        size: 500,
        farmId: farmId
      }
      await this.getFarmCattlePage(params1)

      // 获取 交易信息列表
      let params2 = {
        current: 1,
        size: 500,
        farmId: farmId
      }
      await this.getSellPage(params2)

      // 获取 出栏 列表
      // await this.getVillageTotal(parseInt(farmId))

      this.initChart()
    },
    destroyed() {

    },
    methods: {
      initChart() {
        this.chartData1 = {
          unit: '只',
          x: ['敖尔金牧场', '呼伦镇', '达赖苏木', '阿拉坦额莫勒镇', '阿日哈沙特镇', '克尔伦苏木', '宝格德乌拉苏木', '贝尔苏木'],
          y: [445, 335, 314, 218, 259, 175, 226, 317]
        }
        this.chartData3 = {
          unit: '只',
          data: [
            { name: '敖尔金牧场', value: 436 },
            { name: '呼伦镇', value: 245 },
            { name: '达赖苏木', value: 176 },
            { name: '阿拉坦额莫勒镇', value: 163 },
            { name: '阿日哈沙特镇', value: 243 },
            { name: '克尔伦苏木', value: 156 },
            { name: '宝格德乌拉苏木', value: 356 },
            { name: '贝尔苏木', value: 267 },
          ]
        }
      },

      handleClickTab(tab, event) {
        this.activeTabName = tab.name
      },

      // 获取 全旗 存栏统计
      async getTownCattleCount(farmId) {
        let countyId = 150626000000
        let res = await getTownCattleCount(countyId, farmId)
        try {
          if (res.code == 200) {
            let x = []
            let y = []

            if (res.data && res.data.length) {
              res.data.map(item => {
                if (item.totalCount) {
                  x.push(item.townName)
                  y.push(item.totalCount)
                }
              })

              this.chartData1.x = x.reverse()
              this.chartData1.y = y.reverse()
              this.chartData1 = {...this.chartData1}
            } else {
              this.chartData1.x = []
              this.chartData1.y = []
              this.chartData1 = {...this.chartData1}
            }
          }
        } catch(err) {
          console.log('获取种公羊出栏统计失败 : ', err)
        }
      },
      
      // 获取 等级
      async getMaleCattleCount(farmId) {
        let res = await getMaleCattleCount(farmId)
        try {
          if (res.code == 200) {
            let x = []
            let y = []

            res.data.map(item => {
              if (item.leaveName) {
                x.push(item.leaveName)
                y.push(item.totalCount)
              }
            })

            this.chartData2.x = x.reverse()
            this.chartData2.y = y.reverse()
            this.chartData2 = {...this.chartData2}
          }
        } catch(err) {
          console.log('获取种公羊级别统计失败 : ', err)
        }
      },

      // 获取 全旗 配种统计
      async getCountyBreedCount(farmId) {
        let countyId = 150626000000
        let res = await getCountyBreedCount(countyId, farmId)
        try {
          if (res.code == 200) {
            let dataList = []
            res.data.map(item => {
              if (item.totalCount) {
                dataList.push({id: item.townId, name: item.townName, value: item.totalCount})
              }
            })
            // this.chartData3.data = dataList
            // this.chartData3 = {...this.chartData3}
          }
        } catch(err) {
          console.log('获取全旗配种统计失败 : ', err)
        }
      },

      // 种羊场 列表
      async getFarmList() {
        let res = await getFarmList()
        try {
          if (res.code == 200) {
            this.farmList = res.data
          }
        } catch(err) {
          console.log('获取种羊场列表失败 : ', err)
        }
      },

      // 养殖档案 列表
      async getFarmCattlePage(params) {
        this.isLoading = true
        let res = await getFarmCattlePage(params)
        try {
          if (res.code == 200) {
            setTimeout(() => { 
              this.sheepList = res.data
              this.isLoading = false
            }, 500)
          }
        } catch(err) {
          console.log('获取养殖档案列表失败 : ', err)
        }
      },
      
      // 交易 列表
      async getSellPage(params) {
        // this.pointList = []
        this.isLoading = true
        let res = await getSellPage(params)
        try {
          if (res.code == 200) {
            this.sellList = res.data
            this.isLoading = false

            let list = []
            for (let i in res.data) {
              if (res.data[i].longitude && res.data[i].latitude) {
                list.push({ 
                  index: i + 1,
                  muhuId: res.data[i].muhuId,
                  nickName: res.data[i].nickName,
                  townId: res.data[i].townId,
                  townName: res.data[i].townName,
                  villageId: res.data[i].villageId,
                  villageName: res.data[i].villageName,
                  point: { lng: res.data[i].longitude, lat: res.data[i].latitude }
                })
              }
            }

            // this.pointList = list
          }
        } catch(err) {
          console.log('获取交易列表失败 : ', err)
        }
      },

      // 出栏 列表
      async getVillageTotal(farmId) {
        // this.pointList = []

        let res = await getVillageTotal(farmId)
        try {
          if (res.code == 200) {
            let list = []
            for (let i in res.data) {
              if (res.data[i].longitude && res.data[i].latitude) {
                list.push({ 
                  muhuId: res.data[i].muhuId,
                  townName: res.data[i].townName,
                  villageId: res.data[i].villageName,
                  villageName: res.data[i].villageName,
                  nickName: res.data[i].nickName,
                  point: { lng: res.data[i].longitude, lat: res.data[i].latitude }
                })
              }
            }

            // this.pointList = list
          }
        } catch(err) {
          console.log('获取出栏列表失败 : ', err)
        }
      },

      // 监听 图表2 筛选 年份
      filterChartData(year) {
        if (year.id == 1) {
          this.chartData2 = {
            unit: '只',
            color: '#ed5195',
            x: ['特级', '一级', '淘汰'].reverse(),
            y: [81, 144, 13].reverse()
          }
        } else if (year.id == 2) {
          this.chartData2 = {
            unit: '只',
            color: '#ed5195',
            x: ['特级', '一级', '淘汰'].reverse(),
            y: [93, 154, 21].reverse()
          }
        } else if (year.id == 3) {
          this.chartData2 = {
            unit: '只',
            color: '#ed5195',
            x: ['特级', '一级', '淘汰'].reverse(),
            y: [99, 164, 18].reverse()
          }
        } else {
          this.chartData2 = {
            unit: '只',
            color: '#ed5195',
            x: ['特级', '一级', '淘汰'].reverse(),
            y: [102, 159, 11].reverse()
          }
        }
      },

      // 更新 界面 数据
      async changePageChartData(farmId) {
        // 获取 从 xxx 种羊场 出栏的 种公羊分布情况
        await this.getTownCattleCount(farmId)

        // 获取 种羊场 - 种公羊等级 （暂时没有统计）
        await this.getMaleCattleCount(farmId)

        // 获取 从 xxx 种羊场 出栏的 种公羊在全旗配种情况
        await this.getCountyBreedCount(farmId)

        // 获取 养殖列表
        let params1 = {
          current: 1,
          size: 500,
          farmId: farmId
        }
        await this.getFarmCattlePage(params1)

        // 获取 交易列表
        let params2 = {
          current: 1,
          size: 500,
          farmId: farmId
        }
        await this.getSellPage(params2)

        // 获取 村 种羊分布
        // await this.getVillageTotal(farmId)
      },


      // 监听点击 种羊场 图表
      clickFarm(item) {
        this.activeName = item.name
        this.activeFarmId = item.id

        this.changePageChartData(item.id)
      },

      // 跳转到 牲畜详情页 
      clickAnimal(item) {
        this.goToPage(`/sheepDetail/${item.id}/${item.rfid}/null`)
      },

      // 点击 购买 记录
      clickSellItem(item) {
        this.$router.push({
          path: `/muHuPage/${item.townId}/${item.townName}/${item.villageId}/${item.villageName}/${item.muhuId}/${item.nickName}/${item.phone}`
        })
      },


      // 点击配种统计 扇形
      clickChart3(params) {
        // 查看 配种列表页
        this.$router.push({
          path: `/peiZhongList/${this.activeFarmId}/${this.activeName}/${params.id}/${params.name}`
        })
      },

      // 种羊场 详情
      goToZhongYangChang(farmId) {
        this.goToPage(`/zhongYangChangDetail/${farmId}/${this.activeName}`)
      },

      // 点击种羊场监控
      clickMonitorItem(url) {
        this.isShowMonitor = true
      },

      // 跳转页面 
      goToPage(val) {
        this.$router.push({
          path: val
        })
      },

    }
  }
</script>

<style lang="less">
  .is-active { color: #E4CFBB !important; }
  .el-tabs { height: 100% !important; }
  .el-tabs__content { height: calc(100% - 60px) !important; overflow-y: auto; }
  /* 滚动条没有边框 */
  .el-tabs__content::-webkit-scrollbar {
    width: 2px;
    height: 100%;
    background-color: #888;
  }

  ::-webkit-scrollbar-thumb {                 /*表示纵向滚动块*/
    border-radius: 10px;
    background: #E4CFBB;
  }
  .el-tabs__item { color: #fff; }

  .select_global_job {
    /* 下拉框 */
    .el-select-dropdown{
      border: none;
      background-color: rgba(1, 28, 82, 0.8);
    }
    /* 输入框 */
    .el-input__inner{
      color:#eee;
      border-color: #00fff6;
      background-color: rgba(1, 28, 82, 0.8);
    }
    /* 聚焦时的样式 */
    .el-select .el-input.is-focus .el-input__inner{
      border-color: #0B61AA;
      background-color: rgba(1, 28, 82, 0.8);
      color:#00D3E9;
    }
    /* 下拉框选中 */
    .el-select-dropdown__item{
      color: #eee;
    }
    /* 鼠标经过下拉框 */
    .el-select-dropdown__item.hover, 
    .el-select-dropdown__item:hover{
      color:#00D3E9;
      background-color: #0F3360;
    }
  }

  .s { color: #ed5195; }

</style>
